﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>{$lang.cp_home}{if $ur_here} - {$ur_here} {/if}</title>
    <meta name="robots" content="noindex, nofollow" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/am/styles/general.css?v=20151117" rel="stylesheet" type="text/css" />
	<link href="/am/styles/uploadFiles.css?v=20151127" rel="stylesheet" />
    <script type="text/javascript" src="js/common.js?v=20151117"></script>
    <script type="text/javascript" src="/plugins/laydate/laydate.dev.js"></script>
    <script type="text/javascript" src="/js/transport.admins.js"></script>
    <script type="text/javascript" src="/js/utils.js"></script>
    <script type="text/javascript" src="/js/listtable.js"></script>
    <script type="text/javascript" src="/themes/js/jquery.json-2.4.min.js"></script>
    <script type="text/javascript" src="/themes/js/jquery-1.8.3.min.js"></script>
   
    <style>
        .img_pick {
            padding: 0px;
        }

        .uploadify {
            margin-top: 0px;
            margin-bottom: 15px;
        }

        .uploadify object {
            left: 0px;
        }

        .uploadify-button {
            height: 35px !important;
            line-height: 35px !important;
            background: #16679e !important;
            border: none !important;
        }

        .uploadify-queue {
            width: 360px;
            position: absolute;
            right: 5px;
            z-index: 222;
        }

        .uploadify-queue .cancel {
            background: none;
            height: 16px;
            width: 16px;
            float: right;
            line-height: 16px;
        }

        .uploadify-queue-item .cancel a {
            background: none !important;
        }

        .uploadify-queue .fileName {
            float: left;
        }

        .uploadify-queue-item {
            font: inherit;
            height: 40px;
            line-height: 20px;
        }

        .color_white {
            color: #ffffff;
        }

        #popMsg {
            display: none;
        }

        .img_pick .img_item .lbl_content {
            text-align: center;
        }
    </style>

</head>
<body>

    <input type="hidden" name="groupid" id="groupid" value="1" />
    <div class="dialog_wrp img_dialog_wrp ui-draggable">
        <div class="dialog">
            <div class="dialog_bd">
                <div class="img_pick_panel inner_container_box side_l cell_layout">
                    <div class="inner_side">
                        <div class="group_list">
                            <div class="inner_menu_box">
                                <dl class="inner_menu js_group">
                                    <dd id="js_group_no_group" class="inner_menu_item js_groupitem selected"
                                        data-groupid="1" data-type="group">
                                        <a href="javascript:;" class="inner_menu_link" title="包分组"
                                           onclick="return false" data-groupid="1">
                                            <strong data-groupid="1">包分组</strong>
                                        </a>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="inner_main">
                        <div class="img_pick_area" id="img_pick_area">
                            <div class="sub_title_bar in_dialog">
                                <!-- tips  -->
                                <div class="bubble_tips bubble_right warn r">
                                    <div class="bubble_tips_inner">
                                        	只支持.jpg,.gif,.png,.jpeg格式，大小不超过5M
                                    </div>
                                    <i class="bubble_tips_arrow out"></i>
                                    <i class="bubble_tips_arrow in"></i>
                                </div>
                                <!-- 上传按钮 -->
                                <div class="upload_box r align_right">
                                    <span class="upload_area webuploader-container">
                                        <input type="file" id="upload_a" style="display: none;" />
                                        <!--<a id="upload_a"-->
                                        <!--class="btn btn_primary js_imageupload webuploader-pick"-->
                                        <!--data-groupid="">本地上传</a>-->
                                    </span>
                                </div>
                            </div>
                            <div>
                                <div class="img_pick">
                                    <i class="icon_loading_small white js_loading" style="display: none;"></i>
                                    <ul id="file_list_ul" class="group js_list img_list" style="display: block;"></ul>
                                </div>
                                <div class="js_pagebar" style="display: block;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dialog_ft" id="bttom_ele">
                <span class="dialog_ft_desc">
                    <span>已选</span>
                    <span class="js_selected" id="selected_count">0</span>
                    <span>个，可选<font id="can_selected_count">0</font>个</span>
                </span>

                <div style="float:right;margin-right:25px;">
                    <span class="btn btn_disabled btn_input js_btn_p " id="ok_sure">
                        <button type="button" class="js_btn color_white" disabled=disabled onclick="okSelected();" style="padding: 0px 0px;" data-index="0">确定</button>
                    </span>

                    <span class="btn btn_default btn_input js_btn_p" id="cancel_sure">
                        <button type="button" class="js_btn" data-index="1" style="padding: 0px 0px;"
                                onclick="closeLayerDialog();">取消</button>
                    </span>

                    <span class="btn btn_disabled btn_warn btn_input js_btn_p" id="delete_sure">
                        <button type="button" disabled=disabled class="js_btn" data-index="1" style="padding: 0px 0px;"
                                onclick="delPics();">彻底删除</button>
                    </span>
                </div>

                <input type="hidden" value="" id="selected_pics" />

            </div>

        </div>
    </div>

    <!-- 上传图片插件 -->
    <link href="/plugins/uploadify/uploadify.css?v=20151127" rel="stylesheet" />
    <script src="/plugins/uploadify/jquery.uploadify.min.js?v=20151127"></script>
    <!-- 提醒插件 -->
    <link href="/plugins/notifit/notifIt.css?v=20151127" rel="stylesheet" />
    <script src="/plugins/notifit/notifIt.js?v=20151127"></script>

    <!--  layer dialog plugin start -->
    <include file="Public:aomai_dialog_lay" />
    <!--  layer dialog plugin end -->

    <script>
        /*允许上传文件类型*/
        var fileTypeExts = '*.jpg;*.gif;*.png;*.jpeg';
        var maxWidth="{$maxWidth}";
        /* 当前页数 */
        var page = 1,
        	is_all = 0/* 是否已经加载所有的数据 */,
        	index ='abc' ;
        
        /* 图片显示路径 */
        var show_path = '/attas/',
        	org_show_path = '/Public/uploads/';
        if ("{$isNeedOrg}" == "group")
		show_path =org_show_path;
            var module_name ="group",
            	selected_count=0,
            	reg_partten=/^jpg|jpeg|png|gif|bmp&/;
            /*选中左侧菜单*/
            //$('#js_group_'+module_name).addClass('selected');

            var atta_id_str='';
            /*单选状态开启标志*/
            var only_choose_one='{$_only_choose_one}';

            $(function(){

                //左侧菜单选中
                //$("#{$module_name}").addClass('selected');

                $('h1').find('a').attr({'href':'javascript:;'}).css({'color':'#333 !important'});

                //显示加载,隐藏文件列表
                $('.js_loading').show();
                $('#file_list_ul').hide();
                //点击进来加载
                _loadding_pic_list();

                //左侧菜单点击事件绑定
                $('.js_group dd').click(function(){
                    $(this).addClass('selected').siblings().removeClass('selected');
                    var this_type=$(this).attr('data-type');
                    //设置上传模块的模块名称
                    module_name=this_type;
                    if( module_name == 'goods' ){
                    	show_path = '/attas/';
                    }else{
                    	show_path =org_show_path;
                    }
                    //显示加载,隐藏文件列表
                    $('.js_loading').show();
                    $('#file_list_ul').hide();
                    /*初始化按钮金庸效果*/
                    initSelectPic();
                    //初始化页数,以及所有页数加载标识
                    page = 1;
                    _loadding_pic_list();

                });
                //上传文件
                /* 初始化上传插件 */
                /* ;*.zip;*.rar;*.tar;*.gz;*.7z;*.doc;*.docx;*.txt;*.xml;*.xlsx */
				//debugger
                $("#upload_a").uploadify({
                    "height"          : 30,
                    "swf"             : "/plugins/uploadify/uploadify.swf?v=20151127",
                    "fileObjName"     : "download",
                    "buttonText"      : "上传文件",
                    //"uploader"        : "files_manage.php?act=uploadFiles",
                    "uploader"        : "{:U('uploadFiles')}",
                    "width"           : 120,
                    'removeTimeout'	  : 1,
                    'fileTypeExts'	  : fileTypeExts,
                    'fileSizeLimit'   :'5MB',
                    'formData' :{'module':module_name,'maxWidth':{maxWidth}},



                    'onUploadStart' : function(file) {
						
					
                        $("#upload_a").uploadify("settings", "formData", {'module':module_name,'maxWidth':{maxWidth}});
						
                    },
                    "onUploadSuccess" : uploadPicture,



                    'onFallback' : function() {
                        alert('未检测到兼容版本的Flash.');
                    }
                });

                //            setTimeout(function(){
                $('#upload_a').show();
                //            },500);

                
                //监控当前滚动高度
                $('#img_pick_area').scroll(function(){
                	//获取滚动了的高度
                    var scltop = $(this).scrollTop();
                    //获取div的高度
                    var scrollHeight = $(this)[0].scrollHeight;
                    var this_height = $(this).height();
                    
                    //console.log('scltop:'+scltop+',this_height:'+this_height+',scrollHeight:'+scrollHeight);

                    if ( (scrollHeight - 20) <= (parseInt(this_height)+parseInt(scltop)) && is_all == 0 ){
                    	
                    	index = layer.load(0, {shade:[0.8, '#000000']}); //0代表加载的风格，支持0-2
                    	
                    	page++;
                    	_loadding_pic_list(1);
                    }
                 });
                
                
            });
           

            /* 关闭layer窗口 */
            function closeLayerDialog(){
                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                parent.layer.close(index);
            }

            //上传文件
            /* 初始化上传插件 */
            function uploadPicture(file, data){
                var data = eval("("+data+")");
                var src = '';

                if(data.status){
                    var file_extension_arry = data.attachment_name.split('/');
                    var file_extension_name = file_extension_arry[file_extension_arry.length-1];
                    var file_extension = file_extension_arry[file_extension_arry.length-1].split('.')[1];

                    src = org_show_path+data.file_name;
                    var li_html='<li class="img_item js_imageitem" data-url="h" id="pic_li_'+data.id+'" ';
                    li_html+='data-id="'+data.id+'"';
                    li_html+='data-format="'+file_extension_name+'" onclick="selectPic(this);" >';
                    li_html+='<label class="frm_checkbox_label img_item_bd">';
                    /*如果是图片类就显示图片,不是显示默认图片*/
                    if(reg_partten.test(file_extension)){
                        li_html+='<img src="'+src+'" alt="" class="pic">';
                    }else{
                        li_html+='<img src="./Public/Admin/images/oa/'+file_extension+'.png" alt="" class="pic">';
                    }
                    li_html+='<span class="lbl_content ttips"'+
                            'title="'+file_extension_name+'">'+file_extension_name+'</span>';
                    /* 查看原图 */
                    li_html+='<span class="lbl_content ttips"'+
                            'title="查看原图" style="border-top:1px solid #ddd;padding:0 12px;">'+
                    		'<a href="'+src+'" target="_blank" style="display:block;text-align:center;" >查看原图</a>'+
                    		'</span>';

                    li_html+='<div class="selected_mask">' +
                            '<div class="selected_mask_inner"></div>' +
                            '<div class="selected_mask_icon"></div>' +
                            '</div>' +
                            '</label>' +
                            '</li>';
                    $('#file_list_ul').find('div.empty_tips').remove();
                    $('#file_list_ul').find('.js_imageitem').eq(0).before(li_html);
                    /*$('#file_list_ul').append(li_html);*/

                    //改变数量支
                    var _val=$('#can_selected_count').html();
                    _val=parseInt(_val)+1;
                    $('#can_selected_count').html(_val);

                } else {
                    showvfmsg('error',data.info,2000);
                }
            }


            /*加载列表*/
            function _loadding_pic_list(scroll_load){
                //改变数量支
                var _val=$('#can_selected_count').html();
                //debugger
                $.ajax({
                    url:"{:U('query')}",
                    data:{'module':module_name,'maxWidth':{maxWidth},'page':page},
                    dataType:'json',
                    type:'POST',
                    success:function(data){
                        var li_html='';
                        var file_extension_arry = '';
                        var file_extension_name = '';
                        var file_extension = '';

                        var src = '';

                        $(data.lists).each(function(i,item){
                        	
                            /* 原图路径  */
                            file_extension_arry = item.attachment_name.split('/');
                            file_extension_name = file_extension_arry[file_extension_arry.length-1];
                            file_extension = file_extension_arry[file_extension_arry.length-1].split('.')[1];
                            /* 缩略图片的路径 */
                            src = show_path+item.file_name;

                            li_html+='<li class="img_item js_imageitem" data-url="h" id="pic_li_'+item.id+'" ';
                            li_html+='data-id="'+item.id+'"';
                            li_html+='data-format="'+file_extension_name+'" >';
                            li_html+='<label class="frm_checkbox_label img_item_bd" onclick="selectPic($(this).parent());">';
                            /*如果是图片类就显示图片,不是显示默认图片*/
                            if(reg_partten.test(file_extension)){
                                li_html+='<img src="'+src+'" alt="'+file_extension_name+'" class="pic">';
                            }else{
                                li_html+='<img src="./Public/Admin/images/oa/'+file_extension+'.png" alt="'+file_extension_name+'" class="pic">';
                            }
                            li_html+='<span class="lbl_content ttips"'+
                                    'title="'+file_extension_name+'">'+file_extension_name+'</span>';
                            /* 查看原图 */
                            li_html+='<span class="lbl_content ttips"'+
                                    'title="查看原图" style="border-top:1px solid #ddd;padding:0 12px;">'+
                                    '<a href="'+src+'" target="_blank" style="display:block;text-align:center;" >查看原图</a>'+
                                    '</span>';

                            li_html+='<div class="selected_mask">' +
                                    '<div class="selected_mask_inner"></div>' +
                                    '<div class="selected_mask_icon"></div>' +
                                    '</div>' +
                                    '</label>' +
                                    '</li>';
                            /* 设置可选数量  */
                            _val=parseInt(_val)+1;
                            
                        });                        
                        
                        /* 关闭layer */
                        if( index != 'abc' ){
                        	layer.close(index);
                        }  
                        
 						if( typeof(scroll_load) === 'undefined' ){
                        	
 							if(li_html.length===0){
 	                            li_html='<div class="empty_tips">该分组下没有数据记录</div>';
 	                        }
 							
                        	$('#file_list_ul').html(li_html);
                            //隐藏加载,显示文件列表
                            $('.js_loading').hide();
                            $('#file_list_ul').show();
                            
                        }else{                        	
                        	
                        	$('#file_list_ul').append(li_html);
                        	var dataCount = data.lists.length;
                        	
                        }
 						
 						is_all = data.is_all;

                        //改变数量支
                        $('#can_selected_count').html(_val);
                        
                    },
                    error:function(){
                        $('#file_list_ul').html('<div class="empty_tips">请求服务器失败</div>');
                        $('#file_list_ul').show();
                    },
                    complete:function(){
                           
                    }
                });
            }


            /*
             init pic li
             * */
            function initSelectPic(){
                selected_count=0;
                $('#selected_count').html(selected_count);
                $('#can_selected_count').html(selected_count);
                $('#ok_sure').addClass('btn_disabled').find('button').attr('disabled','disabled');
            }

            /*
            	点击选中上传的图片
             */
            function selectPic(li_obj){
			//debugger
                if(typeof  only_choose_one !=='undefined' && only_choose_one.length!==0 ){
                    /*单选图片的单独处理*/
                    if($(li_obj).find('label').hasClass('selected')){
                        $(li_obj).find('label').removeClass('selected');
                        $('#ok_sure').addClass('btn_disabled').find('button').attr('disabled','disabled');
                        /*禁用删除按钮 2015-10-31*/
                        $('#delete_sure').addClass('btn_disabled').find('button').attr('disabled','disabled');

                        selected_count=0;
                        $('#selected_count').html(0);
                    }else{
                        $(li_obj).find('label').addClass('selected');
                        $('#ok_sure').removeClass('btn_disabled').find('button').removeAttr('disabled');
                        /*取消其他li的选中状态*/
                        $(li_obj).siblings().find('label').removeClass('selected');
                        selected_count=1;
                        $('#selected_count').html(1);

                        /*启动删除按钮  2015-10-31*/
                        $('#delete_sure').removeClass('btn_disabled').find('button').removeAttr('disabled');
                    }
                    return;
                }
                if($(li_obj).find('label').hasClass('selected')){
                    $(li_obj).find('label').removeClass('selected');
                    var _selected_length=$('#file_list_ul').find('label.selected').length;
                    if(_selected_length===0){
                        $('#ok_sure').addClass('btn_disabled').find('button').attr('disabled','disabled');
                        /*禁用删除按钮 2015-10-31*/
                        $('#delete_sure').addClass('btn_disabled').find('button').attr('disabled','disabled');
                    }
                    $('#selected_count').html(--selected_count);
                }else{
                    $(li_obj).find('label').addClass('selected');
                    $('#ok_sure').removeClass('btn_disabled').find('button').removeAttr('disabled');
                    $('#selected_count').html(++selected_count);

                    /*启动删除按钮  2015-10-31*/
                    $('#delete_sure').removeClass('btn_disabled').find('button').removeAttr('disabled');
                }
            }

            /**
             * 点击确定按钮
             */
            function okSelected(){

                var _selected_options = $('#file_list_ul label.selected');
                var _selected_length=_selected_options.length;
                var _selected_arry =new Array();
                for(var i=0;i<_selected_length;i++){
                    var data_id=$(_selected_options[i]).parent().attr('data-id');
                    var data_src=$(_selected_options[i]).find('img').attr('src');
                    var _arry=new Array();
                    _arry['id']=data_id;
                    _arry['src']=data_src;

                    _selected_arry[i]=_arry;
                }
                if ("{$type}"== "details")
				{
				    
                    parent._getDetailsPic(_selected_arry,_selected_length,only_choose_one,'{$tag}','{$isNeedWatch}');
					//debugger
                    closeLayerDialog();
              }
                parent._getSelectedPic(_selected_arry,_selected_length,only_choose_one,'{$tag}','{$isNeedWatch}');
                closeLayerDialog();
            }

            /*
                          点击删除图片
             delete_sure
             * */
            function delPics(){

                var _selected_options = $('#file_list_ul label.selected');
                var _selected_length=_selected_options.length;
                if(_selected_length===0){
                    return;
                }

                var id_str='';
                for(var i=0;i<_selected_length;i++){
                    var data_id=$(_selected_options[i]).parent().attr('data-id');
                    id_str+=data_id+',';
                }

                commonDialog('您确定删除吗?','delPics','confirmDelPics',id_str);

            }

            function confirmDelPics(id_str){
			//debugger
                $.ajax({
                    'url':"{:U('delPics')}",
                    'data':{'id':id_str},
                    'dataType':'json',
                    'type':'POST',
                    success:function(data){
                        if(data.status!==-1){
                            var retstatus = data.status == 1 ? "success" : "error";
                            showvfmsg(retstatus, data.info, 1500);
                            if(data.status==1){
                            	forDelPic(id_str);                           	
                                /* _loadding_pic_list(); */
                            }
                        }else{
                            /*这里需要弹出提示有哪些图片关联了*/
                            showvfmsg('error', data.info, 1500);

                            var content='<ul style="list-style-type: decimal !important;">';
                            $(data.data).each(function(i,item){
                                content+='<li> 图片:<font style="font-weight: bold;">'+item.file_name+'</font>已被包:<font style="font-weight: bold;">'+item.packagename+'</font>使用，不能删除!</li>';

                                atta_id_str+=item.atta_id+',';
                            });
                            content+="</ul>";

                            //询问框
                            layer.confirm(content, {
                                btn: ['强制删除','取消'] /*按钮*/,
                                area: ['500px']
                            }, function(){
                                /*layer.msg('的确很重要', {icon: 1});*/
                                layer.closeAll();
                                commonDialog('您确定强制删除吗?删除后产品图片显示可能错误.','confirm_del','confirmDelPic',atta_id_str,'确定',false);
                                console.log('ok_consume');
                                if(data.status==1){
                                	forDelPic(id_str);
                                    /*_loadding_pic_list();*/
                                }

                            }, function(){
                                layer.closeAll();
                            });

                        }

                    },error:function(){
                        showvfmsg('error','请求服务器失败',1500);
                    },complete:function(){

                    }
                });
            }

            /* 循环删除图片 */
            function forDelPic(idStr){
            	var id_str_arry = idStr.split(',');
            	for( var i=0; i<id_str_arry.length; i++ ){
            		$('#pic_li_'+id_str_arry[i]).remove();
            	}   
            }
            
            function commonDialog(title,id,function_name,param,okval,drag){
                if(typeof  okval === 'undefined'){
                    okval='确定';
                }
                if(typeof  drag === 'undefined'){
                    drag=true;
                }

                //询问框
                layer.confirm(title, {
                    btn: [okval,'取消'] //按钮
                }, function(){
                    /*layer.msg('的确很重要', {icon: 1});*/
                    layer.closeAll();

                    window[function_name](param);
                }, function(){
                    layer.closeAll();
                });

            }

            function confirmDelPic(atta_id_str){
                $.ajax({
                    'url':"{:U('delPics')}",
                    'data':{'id':atta_id_str,'is_confirm':'1'},
                    'dataType':'json',
                    'type':'POST',
                    success:function(data){
                        var retstatus = data.status == 1 ? "success" : "error";
                        showvfmsg(retstatus, data.info, 1500);
                        if(data.status==1){
                        	forDelPic(atta_id_str);
                            /*_loadding_pic_list();*/
                        }

                    },error:function(){
                        showvfmsg('error','请求服务器失败',1500);
                    },complete:function(){

                    }
                });
            }

            function _page_load_userlist_datalist(){
                window.location.reload();
            }

            /* 提示成功与否显示插件 */
            function showvfmsg(type, showinfo, hidetime) {
                _notif(type, showinfo, "right", hidetime);
            }
            function _notif(type, msg, position, timeout) {
                var icon = "";
                if (type == "success") {
                    icon = '<img height="30" src="images/ok.png" />';
                } else if (type == "error") {
                    icon = '<img height="30" src="images/error.png" />';
                } else if (type == "load") {
                    icon = '<img  height="30"  src="images/load9.gif" />';
                    type = "info";
                }

                var notif_str = "<table style='width:90%;margin: auto; height: 60px;'><tr><td style='width: 50px; '>" + icon + "</td><td style='text-align: left;font-weight: bold;'>" + msg + "</td></tr></table>";

                notif({
                    msg: notif_str,
                    type: type,
                    position: position,
                    timeout: timeout
                });
            }

			
			

    </script>
</body>
</html>